<template>
  <view class="me">
    <view class="head">
      <image class="head_img" :src="imgurl">
      <text class="student">{{student}}</text>
      <text class="classname">{{stage}}</text>
      <image class="head-right" mode="" @click="headRight" src="../../static/icons/right.png">
    </view>
    <view v-for="(item,index) in lists" :key="index" class="list">
      <image class="head-iconfont" :src="item.item1">
      <text>{{item.item2}}</text>
      <image class="head-img"  :src="item.item3" @click="jump(item.url)">
    </view>

  </view>
</template>

<script>
export default {
  data(){
    return{
      student:this.$store.state.revise,
      stage:this.$store.state.stage,
      imgurl:this.$store.state.headerImg,
      lists:[
        {
          item1:'../../static/icons/order.png',
          item2:'订单物流',
          item3:'../../static/icons/right.png',
          url:'logistics'
        },
        {
          item1:'../../static/icons/move.png',
          item2:'调班',
          item3:'../../static/icons/right.png',
          url:'move'
        },
        {
          item1:'../../static/icons/trends.png',
          item2:'老师动态',
          item3:'../../static/icons/right.png',
          url:'teacher'
        },
        {
          item1:'../../static/icons/news.png',
          item2:'消息',
          item3:'../../static/icons/right.png'
        },
        {
          item1:'../../static/icons/trends.png',
          item2:'客服中心',
          item3:'../../static/icons/right.png'
        },
        {
          item1:'../../static/icons/install.png',
          item2:'设置',
          item3:'../../static/icons/right.png'
        },
         {
          item1:'../../static/icons/attestation.png',
          item2:'资质证照公示',
          item3:'../../static/icons/right.png'
        }
      ]
    }
  },
  onShow(){
    this.student = this.$store.state.revise
    this.stage = this.$store.state.stage
  },
  methods:{
    headRight(){
      uni.navigateTo({
        url:"message"
      })
    },
    jump(url){
      uni.navigateTo({
        url:url
      })
    }
  }
}
</script>
  
<style scoped>
  .me {
    width: 100%;
    height: 100%;
    flex-direction: column;
  }
  .head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
  }
  .student {
    margin-top: 50rpx;
    margin-left: -330rpx;
    font-size: 20px;
  }
  .head_img {
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%;
    margin: 30rpx;
  }
  .classname {
    position: absolute;
    top: 120rpx;
    left: 250rpx;
    font-size: 14px;
    color:#bbb
  }
  .head-right {
    width: 50rpx;
    height: 50rpx;
    margin-top: 65rpx;
  }
  .list {
    width: 100%;
    height: 100rpx;
    display: flex;
    align-items: center;
  }
  .head-iconfont {
    width: 50rpx;
    height: 50rpx;
    margin: 0 30rpx 0 30rpx;
  }
  .head-img {
    width: 50rpx;
    height: 50rpx;
    position: absolute;
    right: 5rpx;
  }
</style>